<template>
  <div class="content-wrap">
    <div class="mr-10 ml-10">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
        <el-tab-pane label="扩展信息" name="second"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="mr-10 ml-10 mb-20">
      <el-form ref="params" :model="params" label-width="90px">
        <div v-show="activeIndex == 0" v-loading="loading">
          <el-row :gutter="20">
            <el-col :sm="24" :md="12">
              <el-form-item label="文章栏目">
                <el-cascader :props="categoryProps" :show-all-levels="false" v-model="categorySelected"
                  :options="category" @change="handleChange"></el-cascader>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="文章标题" prop="title" :rules="[
                  {
                    required: true,
                    message: '请输入文章标题',
                    trigger: 'blur',
                  },
                  {
                    min: 1,
                    max: 100,
                    message: '标题不能超过100个字',
                    trigger: 'blur',
                  },
                ]">
                <el-input v-model="params.title"></el-input>
              </el-form-item>
            </el-col>



            <el-col :sm="24" :md="12">
              <el-form-item label="英文标题" prop="title" :rules="[
                  {
                    required: true,
                    message: '请输入文章标题',
                    trigger: 'blur',
                  },
                  {
                    min: 1,
                    max: 255,
                    message: '标题不能超过255个字',
                    trigger: 'blur',
                  },
                ]">
                <el-input v-model="params.title_en"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="tag标签">
                <el-select-v2 v-model="params.tag_id" :options="taglist" placeholder="请选择标签" style="width: 240px"
                  multiple filterable remote :remote-method="searchTag" />
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="内容属性">
                <el-checkbox-group v-model="params.attr" @change="handleAttr">
                  <el-checkbox label="1">头条</el-checkbox>
                  <el-checkbox label="2">推荐</el-checkbox>
                  <el-checkbox label="3">轮播</el-checkbox>
                  <el-checkbox label="4">热门</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="发布时间">
                <el-date-picker v-model="params.createdAt" :default-value="new Date()" type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item class="row" label="缩略图">
                <el-upload class="avatar-uploader" :http-request="upload" :show-file-list="false"
                  :before-upload="beforeUpload">
                  <el-popover placement="top-start" title="上传" :width="200" trigger="hover" content="上传图片作为封面图">
                    <template #reference>
                      <el-icon class="avatar-uploader-icon">
                        <MostlyCloudy />
                      </el-icon>
                    </template>
                  </el-popover>
                </el-upload>

                <el-popover v-if="params.img" placement="right" :width="400" trigger="hover">
                  <template #reference>
                    <el-image class="avatar-uploader-icon pointer ml-10" :src="params.img" />
                  </template>
                  <el-image style="width: 100%" :src="params.img" />
                </el-popover>

                <el-button type="primary" class="ml-10" @click="drawer = true">
                  默认封面图
                </el-button>

                <el-drawer v-model="drawer" title="默认封面图" class="w-300" :with-header="false">
                  <div class="cover row">
                    <el-image v-for="(item, index) of drawerList" :key="index" :src="item" @click="selectCover(item)"
                      fit="cover" />
                  </div>
                </el-drawer>

                <el-input class="ml-10 flex-1" v-model="params.img"></el-input>
              </el-form-item>

              <el-form-item class="row" label="视频1">
                <el-upload class="avatar-uploader" :http-request="upload1" :show-file-list="false">
                  <el-popover placement="top-start" title="上传" :width="200" trigger="hover" content="点击上传">
                    <template #reference>
                      <el-icon class="avatar-uploader-icon">
                        <MostlyCloudy />
                      </el-icon>
                    </template>
                  </el-popover>
                </el-upload>

                <el-input class="ml-10 flex-1" v-model="params.video1"></el-input>
              </el-form-item>

              <el-form-item class="row" label="视频2">
                <el-upload class="avatar-uploader" :http-request="upload2" :show-file-list="false">
                  <el-popover placement="top-start" title="上传" :width="200" trigger="hover" content="点击上传">
                    <template #reference>
                      <el-icon class="avatar-uploader-icon">
                        <MostlyCloudy />
                      </el-icon>
                    </template>
                  </el-popover>
                </el-upload>

                <el-input class="ml-10 flex-1" v-model="params.video2"></el-input>
              </el-form-item>

              <el-form-item class="row" label="视频3">
                <el-upload class="avatar-uploader" :http-request="upload3" :show-file-list="false">
                  <el-popover placement="top-start" title="上传" :width="200" trigger="hover" content="点击上传">
                    <template #reference>
                      <el-icon class="avatar-uploader-icon">
                        <MostlyCloudy />
                      </el-icon>
                    </template>
                  </el-popover>
                </el-upload>

                <el-input class="ml-10 flex-1" v-model="params.video3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!--
          field_cname   中文名称 varchar 60
          field_ename   英文名称 varchar 60
          field_type
          from表单类型
          1单行文本（varchar）
          2.多行文本
          text 3.下拉菜单
          text 4.单选
          text 5.多选
          6.时间和日期
          field_default  字段配置 男 女
          field_values   默认值可选 255
          field_sort     字段顺序
          -->
          <el-form-item label="内容摘要">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="params.description"></el-input>
          </el-form-item>

          <el-form-item label="英文摘要">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="params.description_en"></el-input>
          </el-form-item>

          <el-form-item label="文章内容">
            <vue3-tinymce v-model="params.content" :setting="setting" @init="tinymce"
              script-src="/public/admin/tinymce/tinymce.min.js" />
          </el-form-item>

          <el-form-item label="英文内容">
            <vue3-tinymce v-model="params.content_en" :setting="setting" @init="tinymce"
              script-src="/public/admin/tinymce/tinymce.min.js" />
          </el-form-item>

          <el-row :gutter="20">
            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="自动封面">
                <el-checkbox v-model="autoImg">
                  文章第
                  <el-input v-model="picNum" class="w-80 mr-8 ml-8" placeholder="请输入内容"></el-input>张图
                </el-checkbox>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="提取描述">
                <el-checkbox v-model="autoDes">提取文章描述</el-checkbox>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12" :lg="8">
              <el-form-item label="是否显示">
                <el-radio v-model="params.status" value="0">发布</el-radio>
                <el-radio v-model="params.status" value="1">不发布</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-show="activeIndex == 1">
          <el-row :gutter="20">
            <el-col :sm="24" :md="12">
              <el-form-item label="短标题" prop="name">
                <el-input v-model="params.short_title"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="SEO标题">
                <el-input v-model="params.seo_title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="12">
              <el-form-item label="SEO关键词">
                <el-input v-model="params.seo_keywords"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="SEO描述">
                <el-input v-model="params.seo_description"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="来源">
                <el-input v-model="params.source"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="作者">
                <el-input v-model="params.author"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="外链跳转">
                <el-input v-model="params.link" max="120"></el-input>
              </el-form-item>
            </el-col>
            <!--
          field_cname   中文名称 varchar 60
          field_ename   英文名称 varchar 60
          field_type
          from表单类型 1单行文本（varchar）
          2.多行文本
          text 3.下拉菜单
          text 4.单选
          text 5.多选
          6.时间和日期
          field_default  默认值可选 255
          field_values   字段配置 男 女
          field_sort     字段顺序
          -->
            <el-col :sm="24" :md="12" :lg="8" v-for="(item, index) of field" :key="index">
              <el-form-item :label="item.field_cname">
                <el-input v-model="item.field_values" max="120" v-if="item.field_type === '1'"></el-input>
                <el-input type="textarea" :rows="3" v-else-if="item.field_type === '2'" placeholder="请输入内容"
                  v-model="item.field_values"></el-input>
                <el-input type="textarea" :rows="3" v-else placeholder="请输入内容" autosize="false"
                  v-model="item.field_values"></el-input>
              </el-form-item>
            </el-col>

            <el-col :sm="24" :md="12">
              <el-form-item label="浏览数">
                <el-input v-model="params.pv"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-form-item>
          <el-button type="primary" @click="submit('params')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    find
  } from "@/api/category.js";
  import {
    create,
    findField
  } from "@/api/article.js";
  import {
    search
  } from "@/api/tag.js";
  import {
    upload
  } from "@/api/upload.js";
  import Vue3Tinymce from "@/components/Vue3Tinymce/src/main.vue";
  import {
    tinymceSet
  } from "@/config/tinymce.js";
  import {
    uploadUrl
  } from "@/api/upload.js";
  import {
    addLabelValue,
    getImgUrlFromStr,
    filterHtml,
    tree,
  } from "@/utils/tool.js";

  export default {
    name: "article-add",
    components: {
      Vue3Tinymce,
    },
    data: () => {
      return {
        setting: tinymceSet,
        loading: true,
        categorySelected: [], //-1默认选中顶级栏目
        categoryProps: {
          checkStrictly: true
        },

        activeName: "first", //tab 默认显示第一个
        activeIndex: "0", //tab 内容默认显示第一个
        category: [], //当前所有栏目
        cateList: [], //所有栏目
        autoImg: false,
        autoDes: false,
        picNum: 1,
        taglist: [],
        params: {
          //接口入参
          cid: 0,
          title: "",
          title_en: "",
          short_title: "",
          tag_id: "",
          attr: [],
          seo_title: "",
          seo_keywords: "",
          seo_description: "",
          source: "",
          author: "",
          description: "",
          description_en: "",
          img: "",
          video1: "",
          video2: "",
          video3: "",
          createdAt: new Date(),
          updatedAt: new Date(),
          content: "欢迎使用",
          content_en: "welcome",
          status: "0",
          pv: 1,
          link: "",
        },
        field: [], //字段列表
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        cur: 1,
        keywords: "",
        drawer: false,
        drawerList: [
          "/public/cover/01.jpg",
          "/public/cover/02.jpg",
          "/public/cover/03.jpg",
          "/public/cover/04.jpg",
          "/public/cover/05.jpg",
          "/public/cover/06.jpg",
          "/public/cover/07.jpg",
          "/public/cover/08.jpg",
          "/public/cover/09.jpg",
          "/public/cover/10.jpg",
        ],
      };
    },
    computed: {},
    async mounted() {
      this.setting.images_upload_url = await uploadUrl();
    },
    created() {
      this.query();
      this.searchTag();
    },
    unmounted() {},
    methods: {
      handleClick(tab) {
        this.activeIndex = tab.index;
      },

      setContent(article) {
        this.params.content = article;
      },

      tinymce() {
        this.loading = false;
      },

      selectCover(v) {
        this.params.img = v;
      },

      //查询标签
      async searchTag(keywords) {
        try {
          let res = await search(this.cur, keywords);
          if (res.code === 200 && res.data) {
            let arr = [];
            res.data.list.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
            this.taglist = arr;
          }
        } catch (error) {
          console.log(error);
        }
      },

      //查询
      async query() {
        try {
          let res = await find();
          if (res.code === 200) {
            let dataTree = addLabelValue(tree(res.data));
            let data = addLabelValue(res.data);
            this.cateList = data;
            this.category = [...dataTree];
          }
        } catch (error) {
          console.log(error);
        }
      },

      //选择栏目
      handleChange(e) {
        console.log(e);
        if (e[0] != -1) {
          this.params.cid = e[e.length - 1];
          this.findField(this.params.cid);
        } else {
          this.field = [];
        }
      },

      handleAttr(e) {
        console.log("e-->", e);
      },

      handleSubCid(e) {
        console.log("e-->", e);
      },

      beforeUpload(rawFile) {
        if (rawFile.type.indexOf("image") === -1) {
          this.$message("上传文件只能是图片格式");
          return false;
        }
        // if (rawFile.size / 1024 / 1024 > 0.2) {
        //   this.$message("上传图片必须小于200k");
        //   return false;
        // }
      },
      //上传缩略图
      async upload(file) {
        let fd = new FormData();
        //把上传文件的添加到 ForDate对象中
        fd.append("file", file.file);
        let res = await upload(fd);
        console.log("--->", res);
        if (res.code === 200) {
          this.params.img = res.data.path;
        }
      },
      async upload1(file) {
        let fd = new FormData();
        //把上传文件的添加到 ForDate对象中
        fd.append("file", file.file);
        let res = await upload(fd);
        console.log("--->", res);
        if (res.code === 200) {
          this.params.video1 = res.data.path;
        }
      },
      async upload2(file) {
        let fd = new FormData();
        //把上传文件的添加到 ForDate对象中
        fd.append("file", file.file);
        let res = await upload(fd);
        console.log("--->", res);
        if (res.code === 200) {
          this.params.video2 = res.data.path;
        }
      },
      async upload3(file) {
        let fd = new FormData();
        //把上传文件的添加到 ForDate对象中
        fd.append("file", file.file);
        let res = await upload(fd);
        console.log("--->", res);
        if (res.code === 200) {
          this.params.video3 = res.data.path;
        }
      },

      //查询
      async findField(cid) {
        try {
          let res = await findField(cid);
          if (res.code === 200) {
            this.field = res.data.fields;
          }
        } catch (error) {
          console.log(error);
        }
      },
      //新增
      async create() {
        try {
          let params = {
            ...this.params
          };
          params.attr = params.attr.toString();
          params.tag_id = params.tag_id.toString();

          //判断是否有缩略图
          if (!params.img && this.autoImg) {
            params.img = getImgUrlFromStr(params.content)[0];
          }

          if (!params.description && this.autoDes) {
            params.description = filterHtml(params.content).substr(0, 255);
          }
          //处理模型字段信息
          let fieldParams = {};
          this.field.map((item) => {
            fieldParams[item.field_ename] = item.field_values;
          });

          let res = await create({
            defaultParams: params,
            fieldParams: fieldParams,
          });
          if (res.code == 200) {
            this.$message({
              message: "更新成功^_^",
              type: "success",
            });
            this.$router.go(-1);
          } else {
            this.$message({
              message: res.msg,
              type: "success",
            });
          }
        } catch (error) {
          console.log(error);
        }
      },

      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.params.cid == 0) {
              this.$message({
                message: "请选择栏目",
                type: "success",
              });
              return;
            }

            this.create();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  :deep(.tiny-textarea) {
    height: 436px;
  }

  .cover {
    div {
      width: 120px;
      height: 90px;
      margin: 5px;
      cursor: pointer;
    }
  }

  .w-300 {
    width: 300px !important;
  }

  :deep(.el-drawer) {
    width: 280px !important;
  }

  :deep(.el-drawer__body) {
    padding: 0;
  }
</style>
